<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card class="tree-card">
        <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%">
          <el-col> 传值播客</el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <el-col>负责人</el-col>
              <el-col>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down el-icon--right" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加部门</el-dropdown-item>
                    <el-dropdown-item>编辑部门</el-dropdown-item>
                    <el-dropdown-item>删除部门</el-dropdown-item>

                  </el-dropdown-menu>
                </el-dropdown>

              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-tree :data="departs" :props="defaultProps">
          <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width: 100%">
            <el-col> 传值播客</el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <el-col>负责人</el-col>
                <el-col>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>添加部门</el-dropdown-item>
                      <el-dropdown-item>编辑部门</el-dropdown-item>
                      <el-dropdown-item>删除部门</el-dropdown-item>

                    </el-dropdown-menu>
                  </el-dropdown>

                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-tree>

      </el-card>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      departs: [
        { name: '总裁办', children: [{ name: '董事会' }] },
        { name: '行政部' },
        { name: '人事部' }
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {

  }

}
</script>

<style lang='scss'  scoped >
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
 .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
